<template>
  <a-modal
    destroyOnClose
    v-model:open="visible"
    :span="24"
    title="复制mock api地址 (点击链接自动复制到剪贴板)"
    :width="720"
  >
    <ul>
      <li @click="() => copyToClip(`http://localhost:${port}/mock-api/${projectFlag}${apiInfo.uri}`)">
        http://localhost:{{ port }}/mock-api/{{ projectFlag }}{{ apiInfo.uri }}
      </li>
      <li class="border-solid mt-2 mb-1 border-t-orange-400 border-2"></li>
      <li @click="() => copyToClip(`http://${ip}:${port}/mock-api/${projectFlag}${apiInfo.uri}`)">
        http://{{ ip }}:{{ port }}/mock-api/{{ projectFlag }}{{ apiInfo.uri }}
      </li>
    </ul>
    <template #footer>
      <a-button type="primary" @click="() => (visible = false)">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
defineProps<{
  apiInfo: ApiInfo
  projectFlag: string
}>()
const visible = defineModel<boolean>()
const ip = ref<string>('ip')
const port = ref<number>(9527)

async function getServerIpAddr() {
  ip.value = await window.electron.getIpAddress()
  port.value = await window.electron.getServerPort()
}
getServerIpAddr()

/**
 * 复制单行内容到粘贴板
 * content : 需要复制的内容
 */
async function copyToClip(content: string) {
  await navigator.clipboard.writeText(content) // 参数是要写入的文本
  message.success('mock api地址已复制到剪贴板')
}
</script>

<style scoped></style>
